<div class="container">
  <h3>Payment Form</h3>

  <div class="row">
    <div class="form-group col">
      <label>Payee Name</label>
      <input class="form-control" (input)="onNameChange($event.target.value)"/>
    </div>

    <div class="col">
      <label><b>Name</b></label>
      <div>
        {{ name | titlecase}}
      </div>
    </div>
  </div>


  <div class="row">
    <div class="form-group col">
      <label>Payee Date</label>
      <input type="date" class="form-control" (input)="onDateChange($event.target.value)"/>
    </div>

    <div class="col">
      <label><b>Payment Date</b></label>
      <div>
        {{ date | date:'MMMM d,y'}}
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group col">
      <label>Payment Amount</label>
      <input  class="form-control" (input)="onAmountChange($event.target.value)"/>
    </div>

    <div class="col">
      <label><b>Payment Amount</b></label>
      <div>
        {{ amount | currency }}
      </div>
    </div>
  </div>



</div>

